import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { List, Card } from 'antd'
import { routeItem } from '@/components/layout/nav'
import Footer from '@/components/layout/footer'
import './index.css'

function Foo() {
  // 定义响应数据和操作数据的方法
	let [list, setList] = useState<Array<routeItem>>([])
  // 用useSelector获取store中的数据
	const navList = useSelector((state: any) => {
		console.log('Home => react-redux => useSelector...', state.nav)
		return state.nav.navList
	})
  // 用useEffect监听navList
	useEffect(() => {
		console.log('Home => react => useEffect...', navList.length)
		setList(navList)
	}, [navList])

	const jump = (index: number) => {
		const vm = document.getElementById(`nav-item-${index}`)
		vm?.click()
	}

	return (
		<div className="home-container">
			<List
				style={{ minHeight: 'calc(100vh - 180px)' }}
				grid={{
					gutter: 16,
					xs: 1,
					sm: 2,
					md: 4,
					lg: 4,
					xl: 6,
					xxl: 3,
				}}
				dataSource={list}
				renderItem={(item, index) => (
					<List.Item>
						<Card
							className="card-box"
							title={
								<>
									<div className="images-box">
										{item.images?.map((o, key) => (
											<span key={key}>
												<img src={o} alt="" />
											</span>
										))}
									</div>
									<span>{item.name}</span>
								</>
							}
							onClick={() => jump(index)}
						>
							<div title={item.title || item.name}>
								<div>{item.describe}</div>
								<div>{item.query.slice(5) || item.name}</div>
								<div className="tags-box">
									{item.tags?.map((o, key) => (
										<span key={key}>{o}</span>
									))}
								</div>
							</div>
						</Card>
					</List.Item>
				)}
			></List>
			<Footer></Footer>
		</div>
	)
}

export default Foo
